<script setup>
 import { Edit,Delete } from '@element-plus/icons-vue';
 import {artGetListService,artDeleteService} from '@/api/article' //导入获取文章
 import { ref } from 'vue'
// import { ElMessage } from 'element-plus'; //消息提示

//文章列表
const articleList = ref([
    {
        id:'',
        building:'',     //楼宇名称
        element:'',     //单元
        operator:'',     //运营人
        contact:'', //联系方式
        roomnumbers:'',      //房间数
        business:'',         //经营主体
        remark:''            //备注      
    }
]) 

const formModel=ref([])  //弹出框的数据
const total=ref(0) //总条数
const loading=ref(false) //loading状态
// Dialog弹出框的状态
const dialogVisible=ref(false)

// 管理弹出框是否是添加和编辑的
const isDialog=ref(false)
// dialog的ref 进行表单的预校验
const formRef=ref(null)
// 表单规则
const rules = {
    // 楼宇
    building: [
        { required: true, message: '请输入楼宇名称', trigger: 'blur' },
        { pattern: /^\S{1,10}$/, message: '楼宇名称必须是1-10位的非空字符', trigger: 'blur' }
    ],
    // 单元
    element: [
        { required: true, message: '请输入单元', trigger: 'blur' },
        { pattern: /^\S{1,5}$/, message: '单元必须是1-5位的非空字符', trigger: 'blur' }
    ],
    // 运营人
    operator: [
        { required: true, message: '请输入运营人', trigger: 'blur' },
        { pattern: /^\S{1,10}$/, message: '运营人名称必须是1-10位的非空字符', trigger: 'blur' }
    ],
    // 联系方式
    contact: [
        { required: true, message: '请输入联系方式', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '联系方式必须是有效的手机号码', trigger: 'blur' }
    ],
    // 房间数
    roomnumbers: [
        { required: true, message: '请输入房间数', trigger: 'blur' },
        { pattern: /^\d{1,5}$/, message: '房间数必须是1-5位的数字', trigger: 'blur' }
    ],
    // 经营主体
    business: [
        { required: true, message: '请输入经营主体', trigger: 'blur' },
        { pattern: /^\S{1,50}$/, message: '经营主体名称必须是1-50位的非空字符', trigger: 'blur' }
    ],
    // 备注
    remark: [
        { pattern: /^.{0,100}$/, message: '备注不能超过100个字符', trigger: 'blur' }
    ]
}

// const getlouyumodel=()=>{} //获取楼宇数据
// 假数据
const louyumodels=ref([
    {
        id:'001',
        name:'万达'
    },
    {
        id:'002',
        name:'金鼎楼'
    },
    {
        id:'003',
        name:'金勋园'
    },
    {
        id:'004',
        name:'汤臣一品'
    }
    
])


// const getlouyumodel=()=>{} //获取单元数据
const danyuanLists=ref([
    {
        id:'001',
        name:'1单元'
    },
    {
        id:'002',
        name:'2单元'
    },
    {
        id:'003',
        name:'3单元'
    },
    {
        id:'004',
        name:'4单元'
    },
    {
        id:'005',
        name:'5单元'
    }
]) 


// 确定表单
const onSubmit= async ()=>{
    await formRef.value.validate() //预校验

    console.log('表单提交：', formModel.value);
    console.log(isDialog.value);

    // 根据 isDialog 的值判断是添加还是编辑
    if (!isDialog.value) {
        // 添加逻辑
        // 提交 formModel.value 数据

    } else {
        // 编辑逻辑
        // 提交 formModel.value 数据
    }
  dialogVisible.value = false; // 关闭对话框
}



// 定期请求参数对象
const params=ref({
    pagenum:1, //当亲页
    pagesize:5, //当前生效额每页条数
    cate_id:'',
    state:''
})


// 根据后端代码渲染单元管理数据
const getArticleList = async () =>{
    loading.value = true //开启loading效果
    // 渲染单元管理的接口
    const res=await artGetListService(params.value)
    console.log(res);
    articleList.value=res.data.data
    total.value=res.data.total
    loading.value = false //开启loading效果
}


// getArticleList()

// 处理分页逻辑
const handleSizeChange=(size)=>{
    console.log('当前每页条数',size);
    // 如果每页条数发生变化 就要把当前跳到第一页；并且每页条数设置成要变成的条数
    params.value.pagenum=1
    params.value.pagesize=size
    // 重新渲染
    getArticleList()
}

// 分页
const handleCurrentChange=(page)=>{
    console.log('页码变化了',page);
    params.value.pagenum=page
   // 重新渲染
   getArticleList()
}


// 搜索逻辑=>按照最新的搜索条件 ，重新检索 ，从第一页开始展示
// 点击添加单元
const onAddAritcle=()=>{
    // 管理弹出框是否是添加和编辑的
    isDialog.value=false
    dialogVisible.value=true
    // 这是点击的添加车牌要对数据进行重置
    formModel.value=[]

}

// 编辑楼宇 这里要根据后台是不是有数据如果有数据就是修改
const onEditArticle=(row)=>{
    // 管理弹出框是否是添加和编辑的
    isDialog.value=true
    dialogVisible.value=true
    formModel.value = { ...row }; // 设置表单数据为当前行数据的副本
}

// 删除单元的数据
const onDeleteArticle= async (row)=>{
    // 删除逻辑
}

// 监听子组件 (添加或者编辑成功的回调)
const onsuccess=(type)=>{
    if(type==='add'){
        // 渲染最后一页 总条数 ÷ 每页页码条数 的和 再向上取整
        const lastPage=Math.ceil((total.value+1) / params.value.pagesize)
        params.value.pagenum=lastPage //更新成当前页码
    }
    getArticleList()
}


</script>

<template> 
      <page-container title="">
        <template #extra>
            <el-button type="primary" @click="onAddAritcle">短租房管理</el-button>
        </template>
        
        <!-- 表格区域 articleList = 数据源  -->
        <el-table :data="articleList" v-loading="loading">
            <el-table-column type="index" width="100" label="编号" />

            <el-table-column label="楼宇名称" prop="building" >
                <template #default="{row}">
                    {{ row.building }}
                </template>
            </el-table-column>

            <el-table-column label="单元名称" prop="element" >
                <template #default="{row}">
                    {{ row.element }}
                </template>
            </el-table-column>

            <el-table-column label="运营人" prop="house" >
                <template #default="{row}">
                    {{ row.operator }}
                </template>
            </el-table-column>

            <el-table-column label="联系方式" prop="carnumber" >
                <template #default="{row}">
                    {{ row.contact }}
                </template>
            </el-table-column>

            <el-table-column label="房间数" prop="carnumber" >
                <template #default="{row}">
                    {{ row.roomnumbers }}
                </template>
            </el-table-column>

            <el-table-column label="经营主体" prop="carnumber" >
                <template #default="{row}">
                    {{ row.business }}
                </template>
            </el-table-column>

            <el-table-column label="备注" prop="carnumber" >
                <template #default="{row}">
                    {{ row.remark }}
                </template>
            </el-table-column>
            
            <el-table-column label="操作"  width="190">
                <template #default="{row}">
                    <el-button circle type="primary" plain :icon="Edit" @click="onEditArticle(row)"></el-button>
                    <el-button circle type="danger" plain :icon="Delete" @click="onDeleteArticle(row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <el-pagination
            v-model:current-page="params.pagenum"  
            v-model:page-size="params.pagesize"
            :page-sizes="[1, 2, 3, 4]"
             :disabled="false"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin-top: 20px; justify-content: flex-end;"
        />
    </page-container>

    <!-- 弹出框 -->
    <el-dialog v-model="dialogVisible" :title="!isDialog ? '添加短租房':'编辑短租房'" width="30%">
        <el-form :model="formModel" :rules="rules" ref="formRef"  label-width="90px" label-position="left">
            
            <el-form-item label="楼宇名称" prop="building">
                <!-- <el-input v-model="formModel.building" placeholder="请输入楼宇名称"></el-input> -->
                <el-select v-model="formModel.building" placeholder="楼宇名称" >
                    <el-option v-for="item in louyumodels" :key="item.id"  :label="item.name" :value="item.id" />
                 </el-select>
            </el-form-item>

            <el-form-item label="单元名称" prop="element">
                <!-- <el-input v-model="formModel.element" placeholder="请输入单元名称"></el-input> -->
                <el-select v-model="formModel.element" eholder="单元名称" placeholder="请输入单元名称">
                    <el-option v-for="item in danyuanLists" :key="item.id"  :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="运营人" prop="operator">
                <el-input v-model="formModel.house" placeholder="请输入运营人"></el-input>
            </el-form-item>

            <el-form-item label="联系方式" prop="contact">
                <el-input v-model="formModel.contact" placeholder="请输入联系方式"></el-input>
            </el-form-item>

            <el-form-item label="房间数" prop="roomnumbers">
                <el-input v-model="formModel.roomnumbers" placeholder="请输入房间数"></el-input>
            </el-form-item>

            <el-form-item label="经营主体" prop="business">
                <el-input v-model="formModel.business" placeholder="请输入经营主体"></el-input>
            </el-form-item>

            <el-form-item label="备注" prop="remark">
                <el-input v-model="formModel.remark" placeholder="请输入备注"></el-input>
            </el-form-item>


        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">
                确认
                </el-button>
            </span>
        </template>
        
    </el-dialog>


</template>

<style lang="scss" scoped>

</style>